<template>
  <div class="main">
    <el-table
      ref="multipleTableRef"
      :data="reserves"
      style="width: 100%; margin: 20px"
      :height="tableHeight"
      :default-sort="{ prop: 'date', order: 'descending' }"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column fixed="left" type="selection" width="55" />
      <el-table-column property="title" label="民宿" width="120">
      </el-table-column>
      <el-table-column property="img" label="图片" width="120">
        <template #default="scope">
          <el-image
            style="width: 120px; height: 80px"
            :src="scope.row.img"
            :fit="fit"
          />
        </template>
      </el-table-column>

      <el-table-column property="startTime" label="入住时间" width="120" />
      <el-table-column property="endTime" label="退房时间" width="120" />

      <el-table-column property="price" label="价格" width="120" />
      <el-table-column property="days" label="入住天数" width="120" />
      <el-table-column property="totalPrice" label="小计" width="120" />
      <el-table-column property="isPay" label="是否已支付" width="120">
        <template #default="scope">
          <el-tag v-if="scope.row.isPay == 0" type="danger"> 未支付 </el-tag>
          <el-tag v-else> 已支付 </el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="m-2" justify="end"
      >房间总价：<span class="font-bold">{{ total }}</span></el-row
    >
    <el-row class="m-2" justify="end">
      <el-button type="danger" plain @click="handleDeleteReserve()"
        >删除订单</el-button
      >
      <el-button type="danger" class="bg-red-600" @click="handleSubmitReserve()"
        >提交订单</el-button
      >
    </el-row>
  </div>
</template>
<script setup>
import { ref, computed } from "vue";
import { getreserveByUserId, deleteReserve, submitReserve } from "@/api/house";
import { ElMessage } from "element-plus";

const userString = localStorage.getItem("userInfo");
const user = JSON.parse(userString);

const reserves = ref([]);
const total = ref(0);
let screenHeight = ref(window.innerHeight);
let tableHeight = computed(() => {
  return screenHeight.value - 100 + "px";
});

window.onresize = () => {
  screenHeight.value = window.innerHeight;
};
const multipleTableRef = ref();
const multipleSelection = ref([]);

function countTotal(arr, keyName) {
  let $total = 0;
  $total = arr.reduce(function (total, currentValue, currentIndex, arr) {
    return currentValue[keyName] ? total + currentValue[keyName] : total;
  }, 0);
  return $total;
}

// 多选框事件（当选择项发生变化时会触发该事件）
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
  console.log(val);
  // 计算房间总价
  if (val.length !== 0) {
    total.value = countTotal(val, "totalPrice");
  }
};

// 提交按钮事件
const handleSubmitReserve = async () => {
  // 获取勾选项的id
  const ids = multipleSelection.value.map((item) => item.id);
  // 通过id批量删除
  submitReserve(ids).then((res) => {
    if (res.code == 200) {
      ElMessage({
        message: "订单支付成功！",
        type: "success",
      });
      // 刷新表格数据
      refreshTableData();
    }
  });
};

// 删除订单按钮事件
const handleDeleteReserve = async () => {
  const ids = multipleSelection.value.map((item) => item.id);
  deleteReserve(ids).then((res) => {
    if (res.code == 200) {
      ElMessage({
        message: "订单删除成功！",
        type: "success",
      });
      refreshTableData();
    }
  });
};

const refreshTableData = async () => {
  await getreserveByUserId(user.id).then((res) => {
    reserves.value = res.result;
  });
};
refreshTableData();
</script>
<style lang="scss" scoped>
.main {
  width: 1000px;
}
</style>
